<template>
	<view>
		<u-navbar back-icon-color="#f1f1f1" title-color="#f1f1f1" title="确认订单" :background="navbarBackground"></u-navbar>
		<view class="main">
			<!-- 地址信息 -->
			<view class="address">
				<view class="label">
					<text>收货信息</text>
					<u-icon size="40" color="#3d6fc1" name="edit-pen" @click.native="showPopup = true"></u-icon>
				</view>
				<view class="adr">
					<view class="adr-top">
						<text class="name">{{ currentAdr.name || '' }}</text>
						<text class="phone">{{ currentAdr.mobile || '' }}</text>
					</view>
					<view class="adr-bottom">{{ currentAdr.address || '' }}</view>
				</view>
			</view>
			<!-- 商品 -->
			<view class="goods">
				<view class="item-card" v-for="(item, index) in goods" :key="index">
					<u-image width="35vw" height="180" border-radius="10" :src="item.cover && item.cover"></u-image>
					<view class="card-right">
						<text class="name">{{ item.title }}</text>
						<view class="">
							<text>{{ '￥' + item.present_price }}</text>
							<text class="un-price">{{ '￥' + item.origin_price || '' }}</text>
						</view>
						<view class="on-price">
							<view class="price">
								<text class="symbol">定金￥</text>
								<text>{{ item.deposit_price }}</text>
							</view>
							<text class="count">{{ 'x' + item.share_num || '' }}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 门店 -->
			<view class="store">
				<view class="store-title"><text>门店信息</text></view>
				<view class="store-info">
					<view class="store-info-item">
						<text class="store-info-item-title">门店地址</text>
						<text class="store-info-item-sub" v-if="goods.length > 0">{{ goods[0].store_address || '' }}</text>
					</view>
					<view class="store-info-item">
						<text class="store-info-item-title">商家电话</text>
						<text class="store-info-item-sub color" v-if="goods.length > 0" @click="handleContact(goods[0].store_mobile)">{{ goods[0].store_mobile || '' }}</text>
					</view>
				</view>
			</view>
			<!-- 备注 -->
			<view class="remark">
				<view class="remark-title"><text>备注</text></view>
				<view class="remark-content"><u-input type="textarea" v-model="remark" placeholder="选填：填写备注内容，最好先和商家沟通"></u-input></view>
			</view>
			<!-- 操作 -->
			<view class="fixed">
				<view class="left">
					<text>实付定金：</text>
					<text class="price">{{ '￥' + allPrice }}</text>
				</view>
				<view><u-button :hair-line="false" :ripple="true" ripple-bg-color="#8EB7FA" :custom-style="btnStyle" @click="handleSubmit">提交订单</u-button></view>
			</view>
			<!-- 选择地址 -->
			<u-popup v-model="showPopup" mode="bottom" border-radius="15" :closeable="true">
				<view class="popup">
					<view class="popup-title">选择收货地址</view>
					<scroll-view scroll-y>
						<view class="p-item" :class="current == index ? 'active' : ''" v-for="(item, index) in addressList" :key="index" @click="handleChoose(item, index)">
							<view class="p-top">
								<text class="p-name">{{ item.name || '' }}</text>
								<text class="p-phone">{{ item.mobile || '' }}</text>
							</view>
							<view class="p-address">{{ item.address || '' }}</view>
						</view>
					</scroll-view>
				</view>
			</u-popup>
			<!-- 选择支付方式 -->
			<u-popup v-model="showPay" mode="center" border-radius="15" :closeable="true">
				<view class="pay">
					<view class="pay-title">选择支付方式</view>
					<view class="pay-list">
						<view class="pay-item" :class="currentPay == 0 ? 'pay-active' : ''" @click="handlePay(0)">
							<u-image width="60" height="60" :src="require('../../../static/image/qb.png')"></u-image>
							<text>余额支付</text>
							<text class="money">{{ `(余额:￥${money})` }}</text>
						</view>
						<view class="pay-item" :class="currentPay == 1 ? 'pay-active' : ''" @click="handlePay(1)">
							<u-image width="60" height="60" :src="require('../../../static/image/wechat.png')"></u-image>
							<text>微信支付</text>
						</view>
						<!--  -->
<!-- 						<view class="pay-item" :class="currentPay == 1 ? 'pay-active' : ''" @click="handlePay(2)">
							<u-image width="60" height="60" :src="require('../../../static/image/wechat.png')"></u-image>
							<text>支付宝支付</text>
						</view> -->
						<!--  -->
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			navbarBackground: {
				backgroundImage: 'linear-gradient(90deg, rgb(27,52,92), rgb(49,84,142))'
			},
			btnStyle: {
				backgroundColor: '#3d6fc1',
				color: '#f1f1f1',
				margin: '0',
				fontSize: '1rem',
				borderRadius: '0',
				border: 'none',
				padding: '48rpx 50rpx'
			},
			showPopup: false,
			showPay: false,
			addressList: [], // 地址列表
			currentAdr: {}, // 当前地址
			currentPay: '', // 支付方式
			current: 0,
			goods: [], // 已选商品
			remark: '', // 备注
			order_id: '',
			money: '' // 余额
		};
	},
	onLoad(option) {
		// #ifdef MP-WEIXIN
		uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// #endif
		if (option.id) {
			this.$tkRequest('/api/ShopCar/getList').then(res => {
				let list = res.data;
				this.goods = list.filter(item => item.goods_id == option.id);
			});
		} else {
			this.goods = JSON.parse(uni.getStorageSync('chooseListInfo'));
		}
		// 获取地址
		this.$tkRequest('/api/Address/getList').then(res => {
			this.addressList = res.data;
			this.currentAdr = this.addressList[0];
		});
		// 获取用户余额
		this.$tkRequest('/api/User/userInfo').then(res => {
			this.money = res.data.money;
		});
	},
	methods: {
		// 选择地址
		handleChoose(item, index) {
			this.current = index;
			this.currentAdr = item;
			this.showPopup = false;
		},
		handleSubmit() {
			uni.showLoading({
				title: '正在创建订单...'
			});
			let ids = this.goods.map(item => item.id).toString();
			let params = {
				ids: ids,
				address_id: this.currentAdr.id,
				remarks: this.remark
			};
			this.$tkRequest('/api/Orders/add', params, 'POST').then(res => {
				this.order_id = res.data.orders_id;
				// 生成订单后清除订单前商品信息
				uni.removeStorageSync('chooseListInfo');
				this.showPay = true;
			});
		},
		handleContact(phone) {
			uni.makePhoneCall({
				phoneNumber: phone
			});
		},
		handlePay(index) {
			this.currentPay = index;
			switch (index) {
				// 余额支付
				case 0:
					uni.showLoading({
						title: '正在支付...'
					});
					this.$tkRequest('/api/Orders/balancePay', {
						order_id: this.order_id
					}).then(res => {
						uni.showToast({
							title: res.msg
						});
						this.showPay = false;
						setTimeout(() => {
							uni.navigateTo({
								url: '../../mine/order/order'
							});
						}, 1000);
					});
					break;
				case 1:
					// 小程序支付
					// #ifdef MP-WEIXIN
					this.$tkRequest(
						'/api/Wxpay/wxpay',
						{
							order_id: this.order_id
						},
						'POST'
					).then(res => {
						let result = res.data;
						if (result) {
							uni.requestPayment({
								provider: 'wxpay',
								orderInfo: {},
								appId: result.appId,
								nonceStr: result.nonceStr,
								package: result.package,
								paySign: result.paySign,
								signType: result.signType,
								timeStamp: result.timeStamp,
								success: function(res) {
									uni.navigateTo({
										url: '../result/result'
									});
								}
							});
						}
					});
					// #endif
					// APP 支付
					// #ifdef APP-PLUS
					this.$tkRequest(
						'/api/pay/payByWeChat',
						{
							order_id: this.order_id
						},
						'POST'
					).then(res => {
						let result = res.data.config;
						if (result) {
							uni.requestPayment({
								provider: 'wxpay',
								orderInfo: {
									appid: result.appid,
									noncestr: result.noncestr,
									package: result.package,
									partnerid: result.partnerid,
									prepayid: result.prepayid,
									timestamp: result.timestamp,
									sign: result.sign
								},
								success: function(res) {
									uni.navigateTo({
										url: '../result/result'
									});
								}
							});
						}
					});
					// #endif
					// H5支付
					// #ifdef H5
					this.$tkRequest(
						'/api/Wxpay/wxpay',
						{
							order_id: this.order_id
						},
						'POST'
					).then(res => {
						let result = res.data;
						if (result) {
							this.$nextTick(() => {
								this.$wxPay(result, 'order');
								this.showPay = false;
							});
						}
					});
					// #endif
					break;
				// case 2:
				// 	this.$tkRequest('/api/Apppay/payByPayment', {
				// 		order_id: this.order_id
				// 	}).then(res => {
				// 		console.log(res)
				// 	})
			}
		}
	},
	computed: {
		// 计算总价
		allPrice: function() {
			if (this.goods.length > 0) {
				let itemPrice = this.goods.map(item => {
					return item.deposit_price * item.share_num;
				});
				return itemPrice.reduce((a, b) => a + b);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.main {
	padding-bottom: 100rpx;

	.address {
		padding: $uni-spacing-col-lg $uni-spacing-row-lg;
		background-color: #fff;

		.label {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 12pt;
		}

		.adr {
			padding: $uni-spacing-col-lg 0;

			.adr-top {
				.name {
					font-size: 1rem;
				}

				.phone {
					font-size: 10pt;
					color: #999;
					padding: 0 $uni-spacing-row-base;
				}
			}

			.adr-bottom {
				padding-top: $uni-spacing-col-lg;
				font-size: 11pt;
			}
		}
	}

	.goods {
		padding: $uni-spacing-col-lg 0;

		.item-card {
			display: flex;
			align-items: center;
			padding: $uni-spacing-col-lg $uni-spacing-row-lg;
			background-color: #fff;
			border-bottom: 1rpx solid #eee;

			&:last-child {
				border: none;
			}

			.card-right {
				flex: 1;
				height: 180rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding-left: $uni-spacing-row-sm;
				overflow: hidden;

				.name {
					font-size: 1rem;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-weight: bold;
				}

				.un-price {
					font-size: 9pt;
					text-decoration: line-through;
					color: #999;
				}

				.on-price {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.price {
						color: #eab952;
						font-size: 1rem;

						.symbol {
							font-size: 10pt;
						}
					}
				}

				.count {
					font-size: 11pt;
					color: #aaa;
				}
			}
		}
	}

	.store {
		padding: $uni-spacing-col-lg $uni-spacing-row-lg;
		background-color: #fff;

		.store-title {
			font-size: 1rem;
		}

		.store-info {
			padding-top: $uni-spacing-col-base;

			.store-info-item {
				display: flex;
				align-items: center;
				padding: $uni-spacing-col-base 0;

				.store-info-item-title {
					width: 20vw;
					color: #999;
				}

				.store-info-item-sub {
					flex: 1;
				}

				.color {
					color: #3d6fc1;
				}
			}
		}
	}

	.remark {
		padding: $uni-spacing-col-lg $uni-spacing-row-lg;
		margin: $uni-spacing-col-lg 0;
		background-color: #fff;

		.remark-title {
			font-size: 1rem;
		}

		.remark-content {
			padding-top: $uni-spacing-col-base;
		}
	}

	.fixed {
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #fff;
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: $uni-spacing-row-lg;
		border-top: 1rpx solid #eee;
		z-index: 100;

		.left {
			.price {
				font-size: 1rem;
				color: #eab952;
			}
		}
	}

	.pay {
		width: 80vw;
		padding: $uni-spacing-col-lg $uni-spacing-row-lg;

		.pay-title {
			padding-bottom: $uni-spacing-col-lg;
			font-size: 12pt;
		}

		.pay-list {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: $uni-spacing-col-lg 0;

			.pay-item {
				display: flex;
				align-items: center;
				padding: $uni-spacing-col-lg $uni-spacing-row-lg;
				margin: $uni-spacing-col-sm;
				border: 1rpx solid #eee;
				border-radius: 15rpx;
				width: 100%;
				white-space: nowrap;

				.money {
					font-size: 10pt;
					color: #999;
				}

				text {
					padding-left: $uni-spacing-row-base;
					font-size: 12pt;
				}
			}

			.pay-active {
				border-color: #4cd964;
				background-color: #f7fcf7;
			}
		}
	}

	.popup {
		padding: $uni-spacing-col-lg $uni-spacing-row-lg;

		.popup-title {
			padding: $uni-spacing-col-sm 0 $uni-spacing-col-lg 0;
			font-weight: bold;
			font-size: 12pt;
		}

		scroll-view {
			max-height: 37vh;
		}

		.p-item {
			padding: $uni-spacing-col-lg $uni-spacing-row-lg;
			margin: $uni-spacing-col-base 0;
			border: 1rpx dashed #eee;
			border-radius: 15rpx;
			background-color: #f7fafc;
			box-shadow: 0 5rpx 5rpx #f7fafc;

			.p-top {
				display: flex;
				align-items: center;

				.p-name {
					font-size: 1rem;
				}

				.p-phone {
					font-size: 10pt;
					padding: 0 $uni-spacing-row-base;
				}
			}
			.p-address {
				padding-top: $uni-spacing-col-sm;
			}
		}

		.active {
			border-style: solid;
			border-color: #3d6fc1;
			color: #3d6fc1;
		}
	}
}
</style>
